<template>
    <div class="main"  v-loading="loading">
        <el-row class="categoryBox">
            <el-col :span="8"> <h3 class="overflowEllipsis"> 一级模板： {{templateFormData.firstcategoryname}}</h3> </el-col>
            <el-col :span="8"> <h3 class="overflowEllipsis"> 二级模板： {{templateFormData.secondarycategoryname}}</h3> </el-col>
            <el-col :span="8"> <h3 class="overflowEllipsis"> 三级模板： {{templateFormData.topcategoryname}}</h3> </el-col>
        </el-row>
        <!-- 模板配置表单 -->
        <el-form
            :model="templateFormData"
            class="query-form templateForm"
            label-width="80px"
            :rules="rulesTemplate"
            ref="ruleTemplate"
            size="medium">
            <h3 class="typeTitle"><span>商家模板</span> </h3>
            <div class="templateBG">
                <el-row>
                    <el-col :span="2" :offset="1" class="templateTitle">供应型</el-col>
                    <el-col :span="17">
                        <el-form-item prop="template" label="模板ID">
                            <el-input v-model="templateFormData.template" placeholder="请选择模板"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col>
                </el-row>
                <el-row>
                    <el-col :span="17" :offset="3">
                        <el-form-item prop="merchantTemplateName" label="模板名称">
                            <el-input v-model="templateFormData.merchantTemplateName" placeholder="请选择模板"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2" :offset="1">
                        <el-button type="primary" size="medium" @click="addTemplate(1)">关联模板</el-button>
                    </el-col>
                </el-row>
            </div>
            <div class="templateBG">
                <el-row>
                    <el-col :span="2" :offset="1" class="templateTitle">营销型</el-col>
                    <el-col :span="17">
                        <el-form-item prop="template2" label="模板ID">
                            <el-input v-model="templateFormData.template2" placeholder="请选择模板"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col>
                </el-row>
                <el-row>
                    <el-col :span="17" :offset="3">
                        <el-form-item prop="merchantTemplateName2" label="模板名称">
                            <el-input v-model="templateFormData.merchantTemplateName2" placeholder="请选择模板"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2" :offset="1">
                        <el-button type="primary" size="medium" @click="addTemplate(2)">关联模板</el-button>
                    </el-col>
                </el-row>
            </div>
            <div class="templateBG">
                <el-row>
                    <el-col :span="2" :offset="1" class="templateTitle">资源型</el-col>
                    <el-col :span="17">
                        <el-form-item prop="template3" label="模板ID">
                            <el-input v-model="templateFormData.template3" placeholder="请选择模板"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col>
                </el-row>
                <el-row>
                    <el-col :span="17" :offset="3">
                        <el-form-item prop="merchantTemplateName3" label="模板名称">
                            <el-input v-model="templateFormData.merchantTemplateName3" placeholder="请选择模板"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2" :offset="1">
                        <el-button type="primary" size="medium" @click="addTemplate(3)">关联模板</el-button>
                    </el-col>
                </el-row>
            </div>
            <h3 class="typeTitle"><span>商品模板</span></h3>
            <div class="templateBG">
                <el-row>
                    <el-col :span="17" :offset="3">
                        <el-form-item prop="goodstemplate" label="模板ID">
                            <el-input v-model="templateFormData.goodstemplate" placeholder="请选择模板"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2"></el-col>
                </el-row>
                <el-row>
                    <el-col :span="17" :offset="3">
                        <el-form-item prop="goodsTemplateName" label="模板名称">
                            <el-input v-model="templateFormData.goodsTemplateName" placeholder="请选择模板"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2" :offset="1">
                        <el-button type="primary" size="medium" @click="addTemplate(4)">关联模板</el-button>
                    </el-col>
                </el-row>
            </div>
            <el-row >
                <el-col :span="24">
                    <el-button style="margin-right:20px;" @click="goBack">返 回</el-button>
                    <el-button type="primary" @click="submitTemplate">保存设置</el-button>
                </el-col>
            </el-row>
        </el-form>
        <!-- 模板列表弹窗估计有分页 -->
        <el-dialog title="选择模板" width="1000px" v-loading="loading" :visible.sync="dialogTemplate">
            <el-form :model="query"
                        :rules="rulesSearch"
                        ref="ruleSearch"
                        label-width="120px"
                        :inline="true"
                        size="mini"
                        class="demo-ruleForm">
                <el-form-item label="模板名称查询：" prop="name">
                    <el-input v-model="query.name" placeholder="请输入模板名称" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="templateListData" border >
                <el-table-column property="id" label="模板ID" align="center" width="100"></el-table-column>
                <el-table-column property="name" label="模板名称" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="操作" align="center" width="200">
                    <template slot-scope="scope">
                        <el-button type="primary"
                                    size="mini"
                                    @click.native="relationTemplate(scope.row)">关联
                        </el-button>
                        <el-button type="primary"
                                    size="mini"
                                    @click.native="seeTemplate(scope.row)">查看
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页模块start-->
            <el-pagination class="pagination-container"
                            background
                            :page-size="query.pageSize"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            layout="total,sizes,prev, pager, next, jumper"
                            :current-page="query.currentPage"
                            :page-sizes="[10, 20, 30, 50]"
                            :total="totalNumber"></el-pagination>
        </el-dialog>
        <!-- 查看模板模板弹窗 -->
        <el-dialog :title="templateName"  width="800px" v-loading="loading" :visible.sync="dialogTemplateInfo">
            <!-- disabled -->
            <el-form :model="item"
                        :inline="true"
                        v-for="item in templateItemFormList" :key="item.id"
                        size="medium"
                        class="demo-ruleForm">
                <div >
                    <!-- label="模板名称：" -->
                    <el-form-item  prop="name">
                        <el-input v-model="item.fieldname"></el-input>
                    </el-form-item>
                    <!--  label="模板类型：" -->
                    <el-form-item prop="name">
                        <el-select v-model="item.fieldtype"
                                    clearable>
                                <el-option v-for="(v,i) in ['文字', '图片', '数字']"
                                            :key="i"
                                            :label="v"
                                            :value="v"></el-option>
                        </el-select>
                    </el-form-item>
                    <!--  label="是否必填：" -->
                    <el-form-item prop="name">
                        <el-select v-model="item.ismust"
                                    clearable>
                            <el-option :label="'必填'"
                                        :value="0"></el-option>
                            <el-option :label="'非必填'"
                                        :value="1"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import {
    bindMerchantTemplate,
    findTemplateList
} from "../../api/classification/classification.js";
export default {
    components: {},
    data() {
        return {
            loading: false, // 页面加载效果
            query: {
                currentPage: 1,
                pageSize: 10,
                templateType: 1,
                name: null
            },
            rulesSearch: {},
            totalNumber: 0, // 选择模板弹窗分页总页数
            dialogTemplate: false, // 选择模板弹窗
            dialogTemplateInfo: false, // 模板信息弹窗
            templateFormData: {
                // 模板配置表单
                firstcategoryname: "一级分类名字", // 一级分类名字
                secondarycategoryname: "二级分类名字", // 二级分类名字
                topcategoryname: "三级分类名字", // 三级分类名字
                template: null, // 供应型模板id
                merchantTemplateName: null, // 供应型模板名称
                template2: null, // 营销型模板id
                merchantTemplateName2: null, // 营销型模板id
                template3: null, // 资源型模板id
                merchantTemplateName3: null, // 资源型模板名称
                goodstemplate: null, // 商品模板id
                goodsTemplateName: null // 商品模板名称
            },
            rulesTemplate: {},
            type: 1, // 需要关联的类型  1是上产型2是经营性3资源型4是商品模板
            templateListData: [], // 模板列表数据
            templateItemFormList: [], // 模板数据列表
            templateName: "" // 模板名称
        };
    },
    methods: {
        // 搜索模板
        onSearch() {
            this.query.currentPage = 1;
            this.findTemplateList();
        },
        /*弹窗 选择每页条数【10,20,30,40,50】*/
        handleSizeChange(val) {
            this.query.pageSize = val;
            this.findTemplateList(); // 重新查询列表
        },
        /*弹窗 点击页数*/
        handleCurrentChange(val) {
            this.query.currentPage = val;
            this.findTemplateList(); // 重新查询列表
        },
        // 提交模板表单
        submitTemplate() {
            this.$refs["ruleTemplate"].validate(valid => {
                if (valid) {
                    console.log();
                    const data = {
                        goodstemplate: this.templateFormData.goodstemplate,
                        template: this.templateFormData.template,
                        template2: this.templateFormData.template2,
                        template3: this.templateFormData.template3,
                        threeCategoryId: this.templateFormData.topcategoryid
                    };
                    bindMerchantTemplate(data)
                        .then(response => {
                            if (response.code != 0) {
                                this.$message.error(response.message);
                                this.loading = false;
                                return false;
                            }
                            this.$message.success("保存成功！");
                            this.$router.go(-1);
                            this.loading = false;
                            // 清空表单
                            // this.$refs["ruleTemplate"].resetFields();
                        })
                        .catch(err => {
                            this.$message.error(err);
                            this.loading = false;
                        });
                }
            });
        },
        goBack() {
            this.$router.go(-1);
        },
        // 获取模板列表
        findTemplateList() {
            this.loading = true;
            findTemplateList(this.query)
                .then(response => {
                    if (response.code != 0) {
                        this.$message.error(response.message);
                        this.loading = false;
                        return false;
                    }
                    console.log(response);
                    this.templateListData = response.data.list || [];
                    this.totalNumber = response.data.totalNumber || 0;
                    this.$message.success("保存成功！");
                    this.loading = false;
                    // 清空表单
                })
                .catch(err => {
                    this.$message.error(err);
                    this.totalNumber = 0;
                    this.loading = false;
                });
        },
        // 打开模板列表弹窗
        addTemplate(type) {
            this.type = type;
            this.dialogTemplate = true;
            this.query.templateType = type == 4 ? 4 : 1;
            this.findTemplateList();
        },
        // 关联模板
        relationTemplate(row) {
            switch (this.type) {
                case 1: // 供应型模板
                    this.templateFormData.template = row.id;
                    this.templateFormData.merchantTemplateName = row.name;
                    break;
                case 2: // 营销型模板
                    this.templateFormData.template2 = row.id;
                    this.templateFormData.merchantTemplateName2 = row.name;
                    break;
                case 3: // 资源型模板
                    this.templateFormData.template3 = row.id;
                    this.templateFormData.merchantTemplateName3 = row.name;
                    break;
                case 4: // 商品模板
                    this.templateFormData.goodstemplate = row.id;
                    this.templateFormData.goodsTemplateName = row.name;
                    break;
            }
            this.dialogTemplate = false; // 关闭弹窗
        },
        // 查看模板
        seeTemplate(row) {
            this.templateName = row.name;
            this.templateItemFormList = row.templateItemFormList || [];
            this.dialogTemplateInfo = true;
        }
    },
    created() {
        this.templateFormData = this.$route.query;
        this.findTemplateList();
    }
};
</script>
<style lang="scss" scoped>
.main {
    width: 1000px;
    // border: 1px solid #d5d5d5;
    // box-shadow: 0px 0px 10px 1px #f5f5f5;
}
.categoryBox {
    padding: 20px;
    // background-color: #f9f9f9;
    box-shadow: 0px 0px 21px 1px #f5f5f5;
}
.templateForm {
    padding: 20px;
    // border: 1px solid #d5d5d5;
    // box-shadow: 0px 0px 21px 1px #f5f5f5;
}
.typeTitle {
    line-height: 40px;
    padding: 10px;
    margin-bottom: 20px;
    span {
        padding: 0 5px;
        height: 20px;
        line-height: 20px;
        display: block;
        border-left: 3px solid #409eff;
    }
}
.templateBG {
    padding-top: 22px;
    // background-color: #f9f9f9;
    box-shadow: 0px 0px 21px 1px #f5f5f5;
    margin-bottom: 22px;
}
.templateTitle {
    line-height: 33px;
}
.overflowEllipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
